<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单提交</title>
    <!-- css -->
    <link rel="stylesheet" href="/fk-acti/formjs/cdn/element-ui/theme-chalk/index.css">
    <!-- babel -->
    <script src="/fk-acti/resource/babel/babel-browser.min.js"></script>
    <!-- vue -->
    <script src="/fk-acti/formjs/cdn/vue/vue.min.js"></script>
    <!-- element-ui js -->
    <script src="/fk-acti/formjs/cdn/element-ui/index.js"></script>
    <!-- axios -->
    <script src="/fk-acti/formjs/cdn/axios/axios.min.js"></script>
    <!-- avue -->
    <script src="/fk-acti/formjs/cdn/avue/avue.min.js"></script>
    <!-- jquery -->
    <script src="/fk-acti/web/resource/js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app" >
        <avue-form v-show="showApp" :option="option" v-model="form" @submit="handleSubmit"></avue-form>
    </div>

<script type="text/babel">
var formVue;
var formJson = {
  "gutter": 0,
  "emptySize": "medium",
  "submitBtn": true,
  "submitText": "提交",
  "labelPosition": "left",
  "emptyText": "清空",
  "column": [
    {
      "display": true,
      "prop": "name",
      "rules": [
        {
          "message": "姓名必须填写",
          "required": true
        }
      ],
      "label": "姓名",
      "type": "input",
      "required": true,
      "span": 24
    },
    {
      "type": "datetimerange",
      "label": "日期范围",
      "span": 24,
      "display": true,
      "format": "yyyy-MM-dd HH:mm:ss",
      "valueFormat": "yyyy-MM-dd HH:mm:ss",
      "prop": "datetimerange",
	  "change": function(time){
		console.log(time.value);
		var endTime = new Date(time.value[1]).getTime()  - new Date(time.value[0]).getTime();
        var day = parseInt(endTime / 60 / 60 / 24 / 1000);
		if(day<1){day=0.5};
		appForm.form.day=day;
	  }
    },
    {
      "display": true,
      "prop": "day",
      "label": "请假天数",
      "placeholder": "",
      "type": "number",
      "required": true,
	  "precision": 1,
      "span": 24
    },
    {
      "display": true,
      "prop": "reason",
      "rules": [
        {
          "message": "请假原因必须填写",
          "required": true
        }
      ],
      "label": "请假原因",
      "type": "textarea",
      "required": true,
      "span": 24
    }
  ],
  "menuBtn": true,
  "emptyBtn": true,
  "menuPosition": "center",
  "labelWidth": 120,
  "submitSize": "medium"
};



formVue = new Vue({
        el: "#app",
        data() {
            return {
                form: {},
                option: formJson,
				showApp : true
            }
        },
        created() {
		},
        methods: {
            handleSubmit(form, done) {
				var thiz = this;
				console.log(form);
            } // handleSubmit
        }
    });
</script>
</body>
</html>